import { CustomProps } from '@/types';
import { useTouch } from '@/hooks';

interface ICard extends CustomProps {
   isbadge?: boolean;
   isAnimate?: boolean;
   deps?: Array<any>;
}
const Card: React.FC<ICard> = ({
   children,
   isbadge,
   onSwipeLeft,
   onSwipeRight,
   isAnimate,
   className = '',
   ...rest
}) => {
   const { ref } = useTouch({ onSwipeLeft, onSwipeRight, isAnimate });

   let baseCls =
      'text-sm rounded-md py-1 px-2 bg-white border text-gray-700 relative ' +
      className;

   return (
      <div className={baseCls} ref={ref} {...rest}>
         {isbadge && (
            <div className="w-2 h-2 bg-red-400 rounded-full absolute -right-0.5 -top-0.5"></div>
         )}
         {children}
      </div>
   );
};

export default Card;
